<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
        <meta name="viewport" content="width=device-width, initial-scale=1" />
    
    <title>甬城通卡消费查询</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
  <script type="text/javascript" src="js/jquery.hoverIntent.js"></script> 
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
  <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
  <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>

  </head>
  
  <body>
    <script type="text/javascript">
	$(document).ready(function(){
	  $("#input").click(function(){
	//	  alert("aaa");
		$.ajax({
			url:"card/queryYctcard.html",
			type:"post",
			dataType:"json",
			async: false,
			data:{username:$("#username").val()},
			success:function(data){
				$(data).each(function(index){
					var val = data[index];
			//	alert(val.cash);
			//	alert(data.account1);
				$("#cash").html(val.cash+"元");
				$("#account1").html(val.account1+"元");
				var str="消费日期："+val.tradedate+"   消费地点"+val.tradeplace+"   消费明细"+val.tradebrief+"   消费金额"+val.tradeamount+"元"+"</br>";
				$("#trade").append(str);
				});
			},
			error:function() {
				alert("error");
			
			}
		});
	//	alert(data.cash);
	  });
	});
</script>
</head>
<body  style=" background-color:#EBEBEB;">


   

<div data-role="page">

        <div data-role="content" style="height:20%; background-color:#92A9D5;">
         <center> 
         <p>甬城通交通卡</p>
          </center> 
          </div>
  <div data-role="content" >
    <form method="get" >
      <div data-role="fieldcontain">
        <label for="username" style="font-size:15px;">请输入卡号</label>
        <input type="text" name="username" id="username" style="background-color:white">       
       
       
      </div>
          <center>

      <input style=""type="button" id="input"  value="提交">
          </center>
    </form>
  </div>

<div data-role="content" >
         
         <ul data-role="listview"  data-inset="true">
         <li style="background-color:white;font-size:15px;" >电子现金余额:<div id="cash" style="  height:20px;float:right;margin-right:25%"></div></li>
        
         
          </div>



 <div data-role="collapsible" data-theme="d" data-content-theme="c" data-iconpos="right" style="background-color:white; margin-left:5%;margin-right:5%">
      <h1>消费记录</h1>
  
      <p><div id="trade" style=" height:100px;overflow-y:scroll;overflow-y:hidden;" ></div></p>
      
    </div>
    
<div data-role="content">
         <center> 
         <p>以上信息非实时记录，仅供参考</p>
          </center> 
          </div>


</div>
  </body>
</html>
